<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple" >
          <div class="ibox-content">
            <h5 class="m-b-md">当月浏览上升日</h5>
            <div class="grid-content bg-purple ibox-content_2" v-for="index in behavior_1up">
             {{index}}日
            </div>
            <h2 class="text-navy">
              <i class="fa fa-play fa-rotate-270"></i> 上升
            </h2>
            <small>更新时间：12天以前</small>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" >
          <div class="ibox-content">
            <h5 class="m-b-md">当月浏览下降日</h5>
            <div class="grid-content bg-purple ibox-content_2" v-for="index in behavior_1down">
              {{index}}日
            </div>
            <h2 class="text-danger">
              <i class="fa fa-play fa-rotate-90"></i> 下降
            </h2>
            <small>更新时间：12天以前</small>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" >
          <div class="ibox-content">
            <h5 class="m-b-md">当月购买上升日</h5>
            <div class="grid-content bg-purple ibox-content_2" v-for="index in behavior_4up">
              {{index}}日
            </div>
            <h2 class="text-navy">
              <i class="fa fa-play fa-rotate-270"></i> 上升
            </h2>
            <small>更新时间：12天以前</small>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
      <div class="grid-content bg-purple" >
        <div class="ibox-content">
          <h5 class="m-b-md">当月购买下降日</h5>
          <div class="grid-content bg-purple ibox-content_2" v-for="index in behavior_4down">
            {{index}}日
          </div>
          <h2 class="text-danger">
            <i class="fa fa-play fa-rotate-90"></i> 下降
          </h2>
          <small>更新时间：12天以前</small>
        </div>
      </div>
    </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple ibox-content" v-for="index in behavior">
          <h5>{{index.name}}</h5>
          <h1 class="no-margins">{{index.value}}</h1>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div id="barContainer" style="height:600px" class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div id="pieContainer" style="height:300px" class="grid-content bg-purple"></div>
        <div id="doughnutContainer" style="height:300px" class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <h2>全国各地区购买力</h2>
      <el-col :span="3">
        <h5>华东地区</h5>
        <h1 class="no-margins">{{huadong_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>华南地区</h5>
        <h1 class="no-margins">{{huanan_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>华中地区</h5>
        <h1 class="no-margins">{{huazhong_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>华北地区</h5>
        <h1 class="no-margins">{{huabei_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>西北地区</h5>
        <h1 class="no-margins">{{xibei_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>西南地区</h5>
        <h1 class="no-margins">{{xinan_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>东北地区</h5>
        <h1 class="no-margins">{{dongbei_4}}</h1>
      </el-col>
      <el-col :span="3">
        <h5>港澳台</h5>
        <h1 class="no-margins">{{gangaotai_4}}</h1>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <div id="mapContainer" style="height:600px" class="grid-content bg-purple"></div>
    </el-row>
  </div>
</template>

<script>
  // import API from '@/api'
  import API from '@/api'
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/map/js/china')
  require('echarts/lib/chart/map')
  require('echarts/lib/chart/pie')
  require('echarts/lib/chart/line')

  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/dataZoom')
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        top10: '',
        behavior: '',
        behaviorChine_4: '',
        huazhong_4: 0,
        huanan_4: 0,
        huabei_4: 0,
        huadong_4: 0,
        xibei_4: 0,
        xinan_4: 0,
        dongbei_4: 0,
        gangaotai_4: 0,
        behavior_1up: '',
        behavior_2up: '',
        behavior_3up: '',
        behavior_4up: '',
        behavior_1down: '',
        behavior_2down: '',
        behavior_3down: '',
        behavior_4down: ''
      }
    },
    mounted () {
      this.drawLine()
    },
    methods: {
      // 获取数据列表
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let chinamap = echarts.init(document.getElementById('mapContainer'))
        // 绘制地图图表
        chinamap.setOption({
          title: {
            text: '全国用户行为分析',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['1', '2', '3', '4']
          },
          visualMap: {
            min: 0,
            max: 700000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],           // 文本，默认为数值文本
            calculable: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          series: [
            {
              name: '1',
              type: 'map',
              mapType: 'china',
              roam: false,
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: []
            },
            {
              name: '2',
              type: 'map',
              mapType: 'china',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: []
            },
            {
              name: '3',
              type: 'map',
              mapType: 'china',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: []
            },
            {
              name: '4',
              type: 'map',
              mapType: 'china',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data: []
            }
          ]
        })
        // 绘制用户行为分析
        let behaviorpie = echarts.init(document.getElementById('pieContainer'))
        behaviorpie.setOption({
          title: {
            text: '用户行为分析',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          series: [
            {
              name: '用户行为分析',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
        // 绘制用户关注商品Top10
        let attentionTop = echarts.init(document.getElementById('doughnutContainer'))
        attentionTop.setOption({
          title: {
            text: '用户关注商品Top10',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: []
          },
          series: [
            {
              name: '十大产品',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: []
            }
          ]
        })
        // 绘制用户年度柱状图
        let yearBar = echarts.init(document.getElementById('barContainer'))
        yearBar.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            data: ['浏览', '收藏', '添加购物车', '购买']
          },
          xAxis: [
            {
              type: 'category',
              data: ['11月1日', '11月2日', '11月3日', '11月4日', '11月5日', '11月6日', '11月7日', '11月8日', '11月9日', '11月10日', '11月12日', '11月13日', '11月14日', '11月15日', '11月16日', '11月17日', '11月18日', '11月19日', '11月20日', '11月21日', '11月22日', '11月23日', '11月24日', '11月25日', '11月26日', '11月27日', '11月28日', '11月29日', '11月30日'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '次数统计',
              min: 0,
              max: 20000,
              interval: 500,
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 0,
              end: 50
            },
            {
              type: 'inside',
              start: 0,
              end: 50
            },
            {
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 30,
              height: '80%',
              showDataShadow: false,
              left: '93%'
            }
          ],
          series: [
            {
              name: '浏览',
              type: 'bar',
              data: []
            },
            {
              name: '收藏',
              type: 'bar',
              data: []
            },
            {
              name: '添加购物车',
              type: 'bar',
              data: []
            }, {
              name: '购买',
              type: 'bar',
              data: []
            }
          ]
        })
        attentionTop.showLoading()
        var params = '{\n' +
          '  findAllTop10{\n' +
          '  \t  value\n' +
          '      name\n' +
          '}\n' + 'findAllBehavior{\n' +
          '    value\n' +
          '    name\n' +
          '}' + 'findAllBehaviorChina_1{\n' +
          '    value\n' +
          '    name\n' +
          '}\n' +
          'findAllBehaviorChina_2{\n' +
          '    value\n' +
          '    name\n' +
          '}\n' +
          'findAllBehaviorChina_3{\n' +
          '    value\n' +
          '    name\n' +
          '}\n' +
          'findAllBehaviorChina_4{\n' +
          '    value\n' +
          '    name\n' +
          '}' + 'findOnePurchesMouth{\n' +
          ' mouth_result\n' +
          '}\n' +
          'findOneBrowseMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneCollectMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneAddcartMouth{\n' +
          '  mouth_result\n' +
          '}' +
          'findOneBehavior_1UpMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_2UpMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_3UpMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_4UpMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_1DownMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_2DownMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_3DownMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          'findOneBehavior_4DownMouth{\n' +
          '  mouth_result\n' +
          '}\n' +
          '}'
        API.datacenter.list(params).then(({data}) => {
          if (data && data.code === 200) {
            this.top10 = data.data.findAllTop10
            this.behavior = data.data.findAllBehavior
          } else {
            this.top10 = data.data.findAllTop10
            this.behavior = data.data.findAllBehavior
            this.behaviorChine_1 = data.data.findAllBehaviorChina_1
            this.behaviorChine_2 = data.data.findAllBehaviorChina_2
            this.behaviorChine_3 = data.data.findAllBehaviorChina_3
            this.behaviorChine_4 = data.data.findAllBehaviorChina_4
            this.purchesMouth = data.data.findOnePurchesMouth.mouth_result
            this.browseMouth = data.data.findOneBrowseMouth.mouth_result
            this.collectMouth = data.data.findOneCollectMouth.mouth_result
            this.addcartMouth = data.data.findOneAddcartMouth.mouth_result
            attentionTop.setOption({
              legend: {data: this.top10.name},
              series: [
                {
                  data: this.top10
                }
              ]
            })
            behaviorpie.setOption({
              legend: {data: this.behavior.name},
              series: [
                {
                  data: this.behavior
                }]
            })
            chinamap.setOption({
              series: [
                {
                  name: '1',
                  data: this.behaviorChine_1
                },
                {
                  name: '2',
                  data: this.behaviorChine_2
                },
                {
                  name: '3',
                  data: this.behaviorChine_3
                },
                {
                  name: '4',
                  data: this.behaviorChine_4
                }
              ]
            })
            yearBar.setOption({
              series: [
                {
                  name: '浏览',
                  type: 'bar',
                  data: this.browseMouth
                },
                {
                  name: '收藏',
                  type: 'bar',
                  data: this.collectMouth
                },
                {
                  name: '添加购物车',
                  type: 'bar',
                  data: this.addcartMouth
                }, {
                  name: '购买',
                  type: 'bar',
                  data: this.purchesMouth
                }
              ]
            })
            attentionTop.hideLoading()
            this.behaviorChine_4.forEach(({name, value}) => {
              if (name.match('(山东|江苏|安徽|浙江|福建|上海)')) {
                this.huadong_4 += parseInt(value)
              } else if (name.match('(广东|广西|海南)')) {
                this.huanan_4 += parseInt(value)
              } else if (name.match('(湖北|湖南|河南|江西)')) {
                this.huazhong_4 += parseInt(value)
              } else if (name.match('(北京|天津|河北|山西|内蒙古)')) {
                this.huabei_4 += parseInt(value)
              } else if (name.match('(宁夏|新疆|青海|陕西|甘肃)')) {
                this.xibei_4 += parseInt(value)
              } else if (name.match('(四川|云南|贵州|西藏|重庆)')) {
                this.xinan_4 += parseInt(value)
              } else if (name.match('(辽宁|吉林|黑龙江)')) {
                this.dongbei_4 += parseInt(value)
              } else {
                this.gangaotai_4 += parseInt(value)
              }
            })
            this.behavior_1up = data.data.findOneBehavior_1UpMouth.mouth_result
            this.behavior_2up = data.data.findOneBehavior_2UpMouth.mouth_result
            this.behavior_3up = data.data.findOneBehavior_3UpMouth.mouth_result
            this.behavior_4up = data.data.findOneBehavior_4UpMouth.mouth_result
            this.behavior_1down = data.data.findOneBehavior_1DownMouth.mouth_result
            this.behavior_2down = data.data.findOneBehavior_2DownMouth.mouth_result
            this.behavior_3down = data.data.findOneBehavior_3DownMouth.mouth_result
            this.behavior_4down = data.data.findOneBehavior_4DownMouth.mouth_result
          }
        })
      }
    }
  }
</script>
<style scoped>
  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {

  }

  .bg-purple {

  }

  .bg-purple-light {

  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;

  }

  .ibox-content {
    display: inline-block;
    padding: 15px 10px 10px;

    color: inherit;
    border-color: #e7eaec;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-width: 1px 0;
  }
  .ibox-content {
    display: inline-block;
    padding: 15px 10px 10px;

    color: inherit;
    border-color: #e7eaec;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-width: 1px 0;
  }.ibox-content_2 {
     display: inline-block;

     color: inherit;
     border-color: #e7eaec;
     -webkit-border-image: none;
     -o-border-image: none;
     border-image: none;
     border-width: 1px 0;
   }

  .text-navy {
    color: #1ab394;
  }
  .text-danger {
    color: red;
  }
</style>
